import React, { Component, PureComponent } from 'react'

import './CommentList.css'

// 聊天记录

    // 容器组件
    // 展示组件

// const Common = ({ head, msg }) => {
//     console.log(' render')
//     return (
//         <li className='line' >
//             <div className='line-head' >{head}</div>
//             <p className='line-msg'>{msg}</p>
//         </li>
//     )
// }
// class Common extends PureComponent{
//     // shouldComponentUpdate(prveProps) {
//     //     if (prveProps.head !== this.props.head ||
//     //         prveProps.msg !== this.props.msg
//     //     ) {
//     //         return true
//     //     }
//     //     return false
//     // }
//     render() {
//         const { data: {head, msg} } = this.props
//         return (
//             <li className='line' >
//                 <div className='line-head' >{head}</div>
//                 <p className='line-msg'>{msg}</p>
//             </li>
//         )
//     }
// }

const Common = React.memo(({ head, msg }) => {
    console.log(' render')
    return (
        <li className='line' >
            <div className='line-head' >{head}</div>
            <p className='line-msg'>{msg}</p>
        </li>
    )
})

export default class CommentList extends Component {
    constructor(props) {
        super(props)
        this.state = {
            commons: [
                {
                    head: '刘德华',
                    msg: '爱你一万年'
                },
                {
                    head: '张柏芝',
                    msg: '张柏芝-爱你一万年'
                },
            ]
        }
    }
    componentDidMount() {
        setInterval(() => {
            this.setState({
                commons: [
                    {
                        head: '刘德华',
                        msg: '爱你一万年'
                    },
                    {
                        head: '张柏芝',
                        msg: '张柏芝-爱你一万年'
                    },
                ]
            })
        }, 1e3)
    }
    render() {
        console.log('parent render')
        return (
            <ul>
                {
                    this.state.commons.map(item => (
                        <Common 
                            key={item.head} 
                            {...item}
                        />
                    ))
                }
            </ul>
        )
    }
}
